<template>
  <div class="v-rp-month">
    <c-row-search :single="true">
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <!-- <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('title_aaaat', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item> -->
        <el-form-item :label="multLang('title_date_t')" prop="beginDate">
          <c-date-picker v-model="form.beginDate" clearable></c-date-picker>
        </el-form-item>
        <el-form-item prop="endDate">
          <c-date-picker v-model="form.endDate" clearable></c-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
      </el-form>
    </c-row-search>
    <c-table-page
      class="v-rp-month-table"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      select
      :total="page.total"
      :page.sync="page.current"
      :size.sync="page.size"
      @page-change="pageChange"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="detail(row)">
          <c-icon name="detail"></c-icon>
          <span>
            {{ multLang('title_aaaat') }}
          </span>
        </el-button>
      </template>
    </c-table-page>
  </div>
</template>

<script>
import { Routes } from '@vue/router/routes'
import { getReportMonthData } from '@/http/api/v1/rp-month'

export default {
  name: 'VRpMonth',
  components: {},
  props: {},
  data() {
    return {
      Routes: Routes,
      form: {
        beginDate: '',
        endDate: ''
      },
      page: {
        current: 1,
        size: 20,
        total: 0
      },
      table: {
        select: '',
        click: {},
        data: [],
        vol: [
          { key: 'title_name_e', val: true },
          { key: 'title_aav_i', val: true }
        ]
      }
    }
  },
  computed: {
    col() {
      return [
        {
          label: 'title_name_e',
          prop: 'report_name',
          formatter: row =>
            row.report_name +
            this.multLang('title_il') +
            this.multLang('title_aaw_s')
        },
        { label: 'title_aav_i', prop: 'generation_time' }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    pageChange() {
      this.query()
    },
    search() {
      this.page.current = 1
      this.query()
    },
    query() {
      getReportMonthData({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        ...this.form,
        ...this.popperForm
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total
        }
      })
    },
    reset() {
      this.$refs.popperForm.resetFields()
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    exportSelect() {},
    exportAll() {},
    exportType() {}
  }
}
</script>

<style lang="scss">
@include admin {
  .v-rp {
    &-month {
      &-table {
        height: calc(100% - 66px);
        overflow: hidden;
      }
    }
  }
}
</style>
